<extend name="Public/base"/>
<block name="style">
    <link rel="stylesheet" href="__STATIC__/jquery-treetable/css/jquery.treetable.css">
    <link rel="stylesheet" href="__STATIC__/jquery-treetable/css/jquery.treetable.image.css">
    <style>
    /*修复由隔行换色引起的一级树的颜色不统一问题*/
    .data-table tbody tr.branch{
        background-color: #FFFFFF;
    }
    </style>
</block>
<block name="body">
	<!-- 标题 -->
	<div class="main-title">
		<h2>服务区域管理</h2>
	</div>

	<!-- 按钮工具栏 -->
	<div class="cf">
		<div class="fl">
			<a class="btn" href="{:U('addArea')}" >增加服务区域</a>
		</div>
	</div>
	<!-- 数据表格 -->
    <div class="data-table">
        <table id="tableTree">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>名称</th>
                    <th>排序</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>

            <!-- 列表 -->
            <tbody>
                <volist name="lists" id="v">
                    <tr data-tt-id="{$v.id}">
                        <td>{$v.areaname}</td>
                        <td>{$v.sort}</td>
                        <td>{$v.remark}</td>
                        <td><a href="{:U('addArea',array('id'=>$v['id']))}">添加楼宇</a> <a href="{:U('editArea',array('id'=>$v['id']))}">编辑</a> <a class="ajax-get confirm" href="{:U('deleteArea',array('id'=>$v['id']))}">删除</a></td>
                    </tr>
                    <notempty name="v._child">
                        <volist name="v._child" id="vc">
                            <tr data-tt-id="{$vc.id}" data-tt-parent-id="{$vc.pid}">
                                <td>{$vc.areaname}</td>
                                <td>{$vc.sort}</td>
                                <td>{$vc.remark}</td>
                                <td><a href="{:U('editArea',array('id'=>$vc['id']))}">编辑</a> <a class="ajax-get confirm" href="{:U('deleteArea',array('id'=>$vc['id']))}">删除</a></td>
                            </tr>
                        </volist>
                    </notempty>
                </volist>    
            </tbody>
        </table>    
	</div>
</block>
<block name="script">
    <script src="__STATIC__/jquery-treetable/jquery.treetable.js"></script>
    <script>
    $("#tableTree").treetable({ 
        expandable: true, 
        indenterTemplate: '<span class="indenter" style="padding:0 10px 0 0"></span>',
    });
    </script>
</block>